<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            table {
                width: 500px;
                margin: 100px auto;
                border-collapse: collapse;
                text-align: center;
            }

            td,
            th {
                border: 1px solid #333;
            }

            thead tr {
                height: 40px;
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <table cellspacing="0">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <script type="text/javascript">
            // 1 数据
            var datas = [{
                    name: '1',
                    subject: 'web',
                    score: 100,
                },
                {
                    name: 'b',
                    subject: 'web',
                    score: 99,
                },
                {
                    name: 'c',
                    subject: 'web',
                    score: 98,
                },
                {
                    name: 'd',
                    subject: 'web',
                    score: 97,
                }
            ]
            //2 创建行
            var tbody = document.querySelector('tbody');
            for (i = 0; i < datas.length; i++) {
                //创建tr行
                var tr = document.createElement('tr');
                tbody.appendChild(tr);
                // 创建单元格
                for (var k in datas[i]) {
                    var td = document.createElement('td');
                    // 对象属性值给td
                    console.log(datas[i][k]);
                    td.innerHTML = datas[i][k];
                    tr.appendChild(td);
                }
                // 创建删除格子
                var td = document.createElement('td');
                td.innerHTML = '<a href="javascript:;">删除</a>';
                tr.appendChild(td);
            }
            //删除
            var as = document.querySelectorAll('a');
            for (var i = 0; i < as.length; i++) {
                as[i].onclick = function() {
                    //删除当前a所在的行
                    tbody.removeChild(this.parentNode.parentNode)
                }
            }
        </script>
    </body>
</html>
